
// Homepage hero -----------------------------

.hero {
  margin: 0 auto;
  backface-visibility: hidden;
  max-width: 900px;
  @include breakpoint(xl) { max-width: 100%; }
  animation: hero-animation 1s forwards;
}
@keyframes hero-animation {
    0% { opacity: 0; transform: scale(.96); }
  100% { opacity: 1; transform: scale(1); }
}


// Electron Icon

$hero-icon-delay: .6s;
$hero-icon-delay-diff: .1s;
$hero-icon-duration: 1s;
$hero-icon-all-delay: 9 * $hero-icon-delay-diff + $hero-icon-delay;


.hero-icon {
  transform-origin: 50% 50%;
  stroke: $jumbo-color-strong;
  stroke-width: 5;
  stroke-linecap: round;
}
.hero-icon.dot {
  fill: $jumbo-color-strong;
  stroke: none;
}

.hero-icon--line {
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
}
.hero-icon--circle {
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
}

@for $i from 1 through 9 {
  .hero-icon-#{$i} {
    $_duration: $hero-icon-duration;
    $_delay:   $hero-icon-delay + ($hero-icon-delay-diff * $i);
    animation: hero-icon-animation $_duration $_delay cubic-bezier(.05, .35, .20, 1) forwards;
  }
}

@keyframes hero-icon-animation {
  100% { stroke-dashoffset: 0; }
}


// Apps ----------------

.hero-app {
  fill: $jumbo-color-subtle;
  transform-origin: 50% 50%;
}

// Ripple effect
$hero-app-delay: $hero-icon-all-delay;
$hero-app-delay-diff: 0.04s;
$hero-app-duration: .8s;
$hero-app-opacity: 0.1;

@keyframes hero-app-animate-left {
    0% { transform: scale(1)   translateX(30px);    opacity: $hero-app-opacity; animation-timing-function: cubic-bezier(.3,.1,.9,.5);  }
   20% { transform: scale(1.1) translateX(20px);                              animation-timing-function: cubic-bezier(.1,.4,.2,1);             }
  100% { transform: scale(1)   translateX( 0px);    opacity: 1; }
}
@keyframes hero-app-animate-right {
    0% { transform: scale(1)   translateX(-30px);   opacity: $hero-app-opacity; animation-timing-function: cubic-bezier(.3,.1,.9,.5);  }
   20% { transform: scale(1.1) translateX(-20px);                               animation-timing-function: cubic-bezier(.1,.4,.2,1);             }
  100% { transform: scale(1)   translateX(  0px);   opacity: 1; }
}

// Colorize and animate
@for $i from 1 through 15 {
  .hero-app-#{$i} {
    fill: mix( $jumbo-color-subtle, $jumbo-bg-color, 80% - $i * 4% );

    $_delay: $hero-app-delay + ($hero-app-delay-diff * $i);
    @if $i % 2 == 0 {
      animation: hero-app-animate-left $hero-app-duration $_delay both;
    } @else {
      animation: hero-app-animate-right $hero-app-duration $_delay both;
    }
  }
}
